import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';
import router from './router'
import { createPinia } from 'pinia'
import { persistPlugin } from './stores/index.js'

const pinia = createPinia()
pinia.use(persistPlugin)

const app = createApp(App);
app.use(ArcoVue);
app.use(router);
app.use(pinia);

// 全局权限指令
app.directive('permission', {
  mounted(el, binding) {
    const { value } = binding;
    const userStore = useUserStore();
    
    if (value && !userStore.permissions?.includes(value)) {
      el.parentNode?.removeChild(el);
    }
  },
  updated(el, binding) {
    const { value } = binding;
    const userStore = useUserStore();
    
    if (value && !userStore.permissions?.includes(value)) {
      el.parentNode?.removeChild(el);
    }
  }
});
app.mount('#app');